@import 'constants.styl';

.kira-post {
	&-cover {
		width: 100%;
		padding-bottom: 40%;
		position: relative;
		overflow: hidden;
		border-radius: 16px;
		min-height: 95px;
		background-color: #eee;

		img {
			display: block;
			opacity: 0;
			transition: opacity 400ms ease-out;
			position: absolute;
			left: 0;
			top: 0;
			object-fit: cover;
			width: 100%;
			height: 100%;

			&.lazyloaded {
				opacity: 1;
			}
		}

		h1 {
			color: #fff;
			font-size: 2.5em;
			font-weight: normal;
			margin: 0;
			margin-top: 10px;
			padding-left: 1px;
			position: absolute;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			text-transform: none;
			z-index: 1;
			margin: 0;
			padding: $gutter;

			&::after {
				background-image: -moz-linear-gradient(
					to top,
					rgba(16, 16, 16, 0.35) 25%,
					rgba(16, 16, 16, 0) 100%
				);
				background-image: -webkit-linear-gradient(
					to top,
					rgba(16, 16, 16, 0.35) 25%,
					rgba(16, 16, 16, 0) 100%
				);
				background-image: -ms-linear-gradient(
					to top,
					rgba(16, 16, 16, 0.35) 25%,
					rgba(16, 16, 16, 0) 100%
				);
				background-image: linear-gradient(
					to top,
					rgba(16, 16, 16, 0.35) 25%,
					rgba(16, 16, 16, 0) 100%
				);
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
				background-size: cover;
				content: '';
				display: block;
				height: 100%;
				left: 0;
				position: absolute;
				bottom: 0;
				width: 100%;
				z-index: -1;
			}
		}
	}

	.kira-post-meta {
		margin: $gutter 0px;
		font-size: 0;

		a {
			border-radius: 20px;
			padding: 10px 18px;
			font-size: 14px;
			display: inline-block;
			margin-bottom: 5px;
			margin-right: 10px;
			text-decoration: none;

			.kirafont {
				font-size: 14px;
			}
		}

		a::before,
		i::before {
			margin-right: 5px;
		}
	}

	.kira-post-copyright {
		margin: 0 -25px;
		margin-bottom: 25px;
		padding: 25px;
		color: #191919;
		background-color: #fafafa;
		line-height: 1.5em;
		position: relative;
		overflow: hidden;

		a {
			color: $color1;
		}
	}

	.kira-post-copyright::after {
		position: absolute;
		background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%234a4a4a' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");
		content: ' ';
		height: 160px;
		width: 160px;
		right: -30px;
		top: -45px;
		opacity: 0.1;
	}

	.kira-post-nav {
		width: 100%;
		height: 2em;
		background-color: #ffffff;
		margin-top: 0;
		user-select: none;

		.post-nav {
			.old {
				float: left;
			}

			.new {
				float: right;
			}

			div a {
				transition: 0.2s;
				padding: 0.2em;
				color: $color1;
				border-bottom: 1px solid $krdbgc1;

				&:hover {
					text-shadow: 0px 0px 5px $krlbgc1;
					text-decoration: none;
					border-bottom: 1px solid $color1;
				}
			}
		}
	}

	.kira-post-footer {
		background-color: #f5f6f5;
		padding: $gutter;
		margin: -($gutter);
		margin-top: 0;
	}
}
